<template>

  <div style="padding-top: 0;position: relative">
    <el-row :gutter="20" style="margin:1% 0 0 0;width: 100%;position:absolute;">
      <el-col :span="4.8" v-for="p in localChengDuTourismArr" style="margin: 0;">
        <el-card style="padding-bottom:20px;width: 200px;height: 180px;padding-right: 0px;position: relative">
          <img :src="p.url" style="width: 100%;height: 50%;display: block" >
          <!--          <h5 style="display: block;position: absolute;top: 50px;left:25px;color: white;font-size: 30px;font-weight: bold;">
                      {{ p.title }}</h5><br>-->
          <span style="display: block;position: absolute;top: 130px;left:20px;color: black;
          font-size: 18px;font-weight:lighter;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
          width: 160px;height: 20px;">{{ p.info }}<br></span><br>
          <span style="display: block;position: absolute;top: 78%;left:40%;color: orangered;font-size: 20px;font-weight:bold">{{ p.price }}<br></span><br>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<script setup>
import {ref} from "vue";

const localChengDuTourismArr = ref([
  {
    title: "成都九寨沟",
    info: "2日1晚跟团游·【万人之选 佛韵禅音 祈福专线】【一价全含】 赠10公里之内上门接+40元景区小交通+(安排景区内酒店) 五爷庙+拜五方文殊+姻缘梵仙山 优先安排金牌导游无损退款】",
    url: "/travelAgent/index/travel1.jpg",
    price: "￥160起"
  },
  {
    title: "成都黄龙风景名胜区",
    info: "2日1晚跟团【特色客栈体验+首道门票全含+含壶口景交+可选旅拍套餐】【真纯玩团】【古城半天自由活动】 逛两院踏寻晋商足迹· 留古城赏夜景美色；",
    url: "/travelAgent/index/travel2.jpg",
    price: "￥160起"
  },
  {
    title: "山西王家大院",
    info: "2日1晚跟团游【金秋国庆4人立减200元】参观一城（平遥古城自由活动-可自行旅拍穿越晋商少奶奶）+双院（王/乔家）+一瀑布（黄河壶口）|含壶口景交赠王家耳麦|宿特色客栈",
    info1: "随心组合",
    url: "/travelAgent/index/travel3.jpg",
    price: "￥160起"
  },{
    title: "山西大同",
    info: "2日1晚跟团游（游悟空同款）【晋北深度游+一车一导+宿古都大同舒适酒店+已含云冈石窟景区小交通】",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "跟团游",
    info: "省钱省心·一站打包",
    url: "/travelAgent/index/travel1.jpg",
    price: "￥160起"
  },
  {
    title: "私家游",
    info: "独立出行·行程可调",
    url: "/travelAgent/index/travel2.jpg",
    price: "￥160起"
  },
  {
    title: "自由行",
    info: "交通·酒店·景点",
    info1: "随心组合",
    url: "/travelAgent/index/travel3.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  }

]);

</script>

<style scoped>

</style>